<template>
  <div>
		<headerSearch :title="headerTitle"></headerSearch>
        <!-- 搜索框 -->
        <!-- <div class="search_all_intop" :style="search_intop" v-if="searchISshow"> </div>
        <div class="search_all" v-if="searchISshow">
            <span class="search_span clear">
                <i class="iconfont icon-sousuo"></i>
                <input type="text" v-model="search" placeholder="搜索">
                <i class="iconfont icon-guanbi" v-if="clearShow" @click="clearClick"></i>
            </span>
            <button class="search_cancel fr" @click="searchCancel">取消</button>
        </div> -->
        <div class="pagecontent">
            <div class="main-userCard"> 
                <div class="suspension-top" style="height: 0.88rem !important;"></div>
                <div class="suspension-info user_card_box" style="height: 2rem !important;">
                    <div class="suspension-info-top main_user_card">
                        <ul>
                            <li @click="handClick('mycard')" :class="{'active':'mycard'===targetFlag}">
                                <i class="iconfont icon-mingpian" :style="style_mycard"></i>
                                <span>我的名片</span>
                            </li>
                            <li @click="handClick('mycolleague')" :class="{'active':'mycolleague'===targetFlag}">
                                <i class="iconfont icon-tongshiquanzi" :style="style_mycolleague"></i>
                                <span>我的同事</span>
                            </li>
                            <li @click="handClick('mycollection')" :class="{'active':'mycollection'===targetFlag}">
                                <i class="iconfont icon-shoucang1" :style="style_mycollection"></i>
                                <span>我的收藏</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 渲染不同的名片方式 -->
            <div v-if="targetFlag==='mycard'" style="margin-top: 2rem;height: 80%;position: absolute;width:100%;overflow-y: auto;">
                <div class="mycardlist" v-for="item in this.CardList" :key="item.id">
                    <div class="mycardlist-top clear">
                        <div class="shareCard">
                            <span @click="shareCard(item.card_id)"><i class="iconfont icon-fenxiang4"></i>分享</span>
                            <span @click="editCard(item.card_id)"><i class="iconfont icon-bianji1"></i>编辑</span>
                            <span @click="deleteCard(item.card_id)"><i class="iconfont icon-baocun"></i>删除</span>
                        </div>

                        <img @click="viewCard(item.card_id)" :src="item.CardLogo" alt="" v-if="item.CardLogo">
                        <img @click="viewCard(item.card_id)" src="../common/images/youquan.png" alt="" v-else>
                        <div class="people-info">
                            <!-- <h4>{{item.CardName}}</h4>
                            <span>{{item.CardPosition}}</span>
                            <span>{{item.CardCompany}}</span> -->
                            <h4 @click="viewCard(item.card_id)">{{item.CardCompany}}</h4> 
                            <span @click="viewCard(item.card_id)">{{item.CardPosition || '请完善职位'}}</span> 
                            <span class="iphonenum" @click="viewCard(item.card_id)"><i class="iconfont icon-dianhua2"></i>{{item.CardPhone}}</span>
                            <!-- <div class="scan_code fr" @click="erweimaClick(item.card_id)">
                                <i class="iconfont icon-erweima"></i>
                            </div> -->
                        </div>
                    </div>
                </div>
                <div class="mycard_insert" @click="createCard">
                    <i class="iconfont icon-icon02"></i>添加名片
                </div>
            </div>

            <!-- 同事名片 -->
            <!-- 这里样式需要调整 -->
            <!-- 这里样式需要调整 -->
            <!-- 这里样式需要调整 -->
            <!-- 这里样式需要调整 -->
            <!-- 这里样式需要调整 -->
            <!-- 这里样式需要调整 -->
            <!-- 这里样式需要调整 -->
            <!-- 这里样式需要调整 -->
            <!-- 这里样式需要调整 -->
            <div class="box" v-if="targetFlag==='mycolleague'" style="margin-top: 3.24rem;">
                <select name="" id="" class="mycoll_select" @change="changeCompany($event.target.value)">
                    <option value="0">全部</option>
                    <option :value="item.id" v-for="(item,ite) in companyArr" :key="ite">{{item.name}}</option>
                </select>
                <i class="iconfont icon-shixinxiajiantou select_updrow"></i>
                <div class="listView" ref="listView">
                    <ul>
                        <li v-for="(item, index) in this.screenColleagueCardList" :key="index" ref="listGroup">
                            <!-- <h5>{{item.title}}</h5> -->
                            <div class="mycardlist" v-for="i in item.items" :key="i.card_id">
                                <div class="mycardlist-top clear">
                                    <div class="shareCard">
                                        <!-- @click="shareCard(item.card_id)" -->
                                        <span @click="shareCard(i.card_id)"><i class="iconfont icon-fenxiang4"></i>分享</span>
                                    </div>
                                    <img @click="viewCard(i.card_id)" :src="i.CardLogo" alt="" v-if="i.CardLogo">
                                    <img @click="viewCard(i.card_id)" src="../common/images/u3095.png" alt="" v-else>
                                    <div class="people-info">
                                        <!-- <h4>{{i.CardName}}</h4>
                                        <span>{{i.CardPosition}}</span>
                                        <span>{{i.CardCompany}}</span> -->
                                        <h4 @click="viewCard(i.card_id)">{{i.CardName || '同事名字'}}</h4> 
                                        <span @click="viewCard(i.card_id)">{{i.CardPosition || '请完善职位'}}</span> 
                                        <span class="iphonenum"><i class="iconfont icon-dianhua2"></i>{{i.CardPhone}}</span>
                                        <!-- <div class="scan_code fr" @click="erweimaClick(i.card_id)">
                                            <i class="iconfont icon-erweima"></i>
                                        </div> -->
                                    </div>
                                </div>
                            </div>
                        </li> 
                    </ul>  
                    <div class="list-shortcut">
                        <ul>
                            <li v-for="(item, index) in shortcutList" class="item" 
                            :data-index="index" 
                            :key="item.id" 
                            @touchstart="onShortcutStart" 
                            @touchmove.stop.prevent="onShortcutMove"
                            :class="{'current': currentIndex === index}"
                            >
                                {{ item }}
                            </li>
                        </ul>
                    </div> 
                </div>
            </div>


            <!-- 收藏名片 -->
            <div class="box" v-if="targetFlag==='mycollection'" style="margin-top: 2rem;height: 80%;position: absolute;width:100%;overflow-y: auto;">
                <div class="listView_c" ref="listView_c">
                    <ul>
                        <li v-for="(item, index) in this.CollectionList" :key="index" ref="listGroup_c">
                            <!-- <h5>{{item.title}}</h5> -->
                            <div class="mycardlist" v-for="i in item.items" :key="i.card_id">
                                <div class="mycardlist-top clear">
                                    <div class="shareCard">
                                        <!-- @click="shareCard(item.card_id)" -->
                                        <span @click="shareCard(i.card_id)"><i class="iconfont icon-fenxiang4"></i>分享</span>
                                    </div>
                                    <img @click="viewCard(i.card_id)" :src="i.CardLogo" alt="" v-if="i.CardLogo">
                                    <img @click="viewCard(i.card_id)" src="../common/images/u3095.png" alt="" v-else>
                                    <div class="people-info">
                                        <!-- <h4>{{i.CardName}}</h4>
                                        <span>{{i.CardPosition}}</span>
                                        <span>{{i.CardCompany}}</span> -->
                                        <h4 @click="viewCard(i.card_id)">{{i.CardName}}&nbsp;&nbsp;<span style="display: inline-block; font-weight: normal;">{{i.CardPosition}}</span></h4> 
                                        <span class="iphonenum"><i class="iconfont icon-dianhua2"></i>131-1230-8868</span>
                                        <span><i class="iconfont icon-gongsi"></i>{{i.CardCompany || '公司'}}</span>
                                        <span><i class="iconfont icon-dizhi1"></i>{{i.CardCompanyAddress || '地址'}}</span>
                                    </div>
                                </div>
                            </div>    
                        </li>
                    </ul>
                    <div class="list-shortcut_c">
                        <ul>
                            <li v-for="(item, index) in shortcutList_c" class="item_c" 
                            :data-index_c="index" 
                            :key="item.id" 
                            @touchstart="onShortcutStart_c" 
                            @touchmove.stop.prevent="onShortcutMove_c"
                            :class="{'current_c': currentIndex_c === index}"
                            >
                                {{ item }}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- <div class="intop" v-show="isShow" @click="intopClick">
                <img class="intop_img" :src="this.QRcode" alt="">
            </div> -->
        </div>
       
  </div>
</template>

<script>
import headerSearch from '../public/header-search.vue';
import {
    MessageBox
  } from 'mint-ui';
  import BScroll from 'better-scroll'
// import footerCard from '../components/footer_card';
// import { Actionsheet } from 'mint-ui';
  export default {
    data() {
      return {
            headerTitle:'我的名片',
            targetFlag: 'mycard',
            CardList:[],    //我的名片
            ColleagueList:[], //我的同事名片
            screenColleagueCardList: [], // 存放筛选后的同事名片
            CollectionList:[],  //我收藏的名片
            isShow: false, // 
            companyArr: [], // 同事选项卡的公司列表 [{id: 1, name: '广州卓天'}, {}....]
            Card:{
                access_token:'',
                user_id: 0
            },
            // imgUrl: this.$path, // 域名
            card_id: '', // 名片id
            // QRcode:'', // 二维码链接
            path:'', // 
            style_mycard: 'background-color: #ff5158; color: #fff', // 选项卡我的样式
            style_mycolleague: 'background-color: #fff; color: #9bdf38', // 选项卡同事样式
            style_mycollection: 'background-color: #fff; color: #dfad35', // 选项卡收藏样式
            scroll: {}, // 拼音排序   带_c的是收藏的，分开
            scrollY: 0, // 拼音排序
            currentIndex: 0, // 拼音排序
            listHeight: [], // 拼音排序
            touch: {}, // 拼音排序
            scrollY_c: 0, // 拼音排序
            currentIndex_c: 0, // 拼音排序
            listHeight_c: [], // 拼音排序
            touch_c: {}, // 拼音排序

            // searchISshow: false,   //关键字搜索框出现
            // clearShow: false,      //清除内容
            // search: '',            //输入内容
            // userCards: [],             //过滤内容替代的数组字段
            // colleagueCards: [],
            // collectionCards: [],
            // search_intop: '',     //遮罩层
      };
    },
    components: {
      headerSearch
    //   footerCard
    },
    mounted() {
        let that = this;
        that.Card.access_token = window.localStorage.getItem('access_token');
        that.Card.user_id = JSON.parse(window.localStorage.getItem('userInfo')).uid;
        this.getCollectionList();
        console.log(that.$route.query.targetFlag)
        // 如果从企业设置跳过来的企业名片，选项卡默认选中同事栏目，公司切换到该公司
        if (that.$route.query.targetFlag) {
            that.targetFlag = that.$route.query.targetFlag? that.$route.query.targetFlag : 'mycard';
            setTimeout(() => {
                that.handClick(that.targetFlag)
            }, 200);
        }
    },
    created:function() {
        this.getCardList();
        this.getColleagueCard();
    },
    watch: {
        scrollY (newVal) {
            // 向下滑动的时候 newVal 是一个负数，所以当 newVal > 0 时，currentIndex 直接为 0
            if (newVal > 0) {
                this.currentIndex = 0
                return
            }
            
            // 计算 currentIndex 的值
            for (let i = 0; i < this.listHeight.length - 1; i++) {
                let height1 = this.listHeight[i]
                let height2 = this.listHeight[i + 1]
                if (-newVal >= height1 && -newVal < height2) {
                    this.currentIndex = i
                    return
                }
            }
            
            // 当超 -newVal > 最后一个高度的时候
            // 因为 this.listHeight 有头尾，所以需要 - 2
            this.currentIndex = this.listHeight.length - 2
        },
        scrollY_c (newVal) {
            // 向下滑动的时候 newVal 是一个负数，所以当 newVal > 0 时，currentIndex 直接为 0
            if (newVal > 0) {
                this.currentIndex_c = 0
                return
            }
            
            // 计算 currentIndex 的值
            for (let i = 0; i < this.listHeight_c.length - 1; i++) {
                let height1 = this.listHeight_c[i]
                let height2 = this.listHeight_c[i + 1]
                if (-newVal >= height1 && -newVal < height2) {
                    this.currentIndex_c = i
                    return
                }
            }
            
            // 当超 -newVal > 最后一个高度的时候
            // 因为 this.listHeight 有头尾，所以需要 - 2
            this.currentIndex_c = this.listHeight_c.length - 2
        },
        // 监听检索输入框
        // search(value) {
        //     if(value != '') {
        //         this.clearShow = true;
        //         this.search_intop = 'background-color: transparent; z-index: 0;'
        //     }else {
        //         this.clearShow = false;
        //         this.search_intop = 'background-color: rgba(0, 0, 0, 0.5);'
        //     }
        // }
    },
    computed: {
        // a-z
        shortcutList () {
            return this.screenColleagueCardList.map((group) => {
                return group.title
            })
        },
        shortcutList_c () {
            return this.CollectionList.map((group) => {
                return group.title
            })
        },

        //过滤方法--我的名片
        // CardList: function() {
        //     let that = this;
        //     var _search = that.search;
        //     if (_search) {
        //         //不区分大小写处理
        //         var reg = new RegExp(_search, 'ig')
        //         //es6 filter过滤匹配，有则返回当前，无则返回所有
        //         return that.userCards.filter(function(e) {
        //             //匹配所有字段
        //             return Object.keys(e).some(function(key) {
        //                 let data = e.CardCompany + e.CardPhone + e.CardPosition;
        //                 return data.match(reg);
        //             })
        //             //匹配某个字段
        //             //  return e.name.match(reg);
        //         })
        //     };
        //     return that.userCards;
        // },
        //过滤方法--同事名片
        // ColleagueList: function() {
        //     let that = this;
        //     var _search = that.search;
        //     if (_search) {
        //         //不区分大小写处理
        //         var reg = new RegExp(_search, 'ig')
        //         //es6 filter过滤匹配，有则返回当前，无则返回所有
        //         return that.colleagueCards.filter(function(e) {
        //             //匹配所有字段
        //             return Object.keys(e).some(function(key) {
        //                 let data = e.CardName + e.CardPhone + e.CardPosition;
        //                 return data.match(reg);
        //             })
        //             //匹配某个字段
        //             //  return e.name.match(reg);
        //         })
        //     };
        //     return that.colleagueCards;
        // },
        //过滤方法--收藏名片
        // CollectionList: function() {
        //     let that = this;
        //     var _search = that.search;
        //     if (_search) {
        //         //不区分大小写处理
        //         var reg = new RegExp(_search, 'ig')
        //         //es6 filter过滤匹配，有则返回当前，无则返回所有
        //         return that.collectionCards.filter(function(e) {
        //             //匹配所有字段
        //             return Object.keys(e).some(function(key) {
        //                 let data = e.title;
        //                 return data.match(reg);
        //             })
        //             //匹配某个字段
        //             //  return e.CardName.match(reg);
        //         })
        //     };
        //     return that.collectionCards;
        // }
        
    },
    methods: {
        // 初始化滚动组件
        _initSrcoll () {
            this.scroll = new BScroll(this.$refs.listView, {
                probeType: 3,
                click: true
            })
        },
        _initSrcoll_c () {
            this.scroll = new BScroll(this.$refs.listView_c, {
                probeType: 3,
                click: true
            })
        },
        // 初始化设置滚动高亮
        _calculateHeight () {
            this.listHeight = []
            const list = this.$refs.listGroup
            let height = 0
            this.listHeight.push(height)
            for (let i = 0; i < list.length; i++) {
                let item = list[i]
                height += item.clientHeight
                this.listHeight.push(height)
            }
        },
        _calculateHeight_c () {
            this.listHeight_c = []
            const list = this.$refs.listGroup_c
            let height = 0
            this.listHeight_c.push(height)
            for (let i = 0; i < list.length; i++) {
                let item = list[i]
                height += item.clientHeight
                this.listHeight_c.push(height)
            }
        },
        // 移动事件
        onShortcutMove: function(e){
            // 再记录一下移动时候的 Y坐标，然后计算出移动了几个索引
            let touchMove = e.touches[0].pageY
            this.touch.y2 = touchMove
            
            // 这里的 16.7 是索引元素的高度
            let delta = Math.floor((this.touch.y2 - this.touch.y1) / 18)
        
            // 计算最后的位置
            // * 1 是因为 this.touch.anchorIndex 是字符串，用 * 1 偷懒的转化一下
            let index = this.touch.anchorIndex * 1 + delta
            // this.scrollToElement(this.$refs.listGroup[index])
            this.scrollToElement(index)
        },
        onShortcutMove_c: function(e){
            // 再记录一下移动时候的 Y坐标，然后计算出移动了几个索引
            let touchMove = e.touches[0].pageY
            this.touch_c.y2 = touchMove
            
            // 这里的 16.7 是索引元素的高度
            let delta = Math.floor((this.touch_c.y2 - this.touch_c.y1) / 18)
        
            // 计算最后的位置
            // * 1 是因为 this.touch.anchorIndex 是字符串，用 * 1 偷懒的转化一下
            let index = this.touch_c.anchorIndex * 1 + delta
            // this.scrollToElement(this.$refs.listGroup[index])
            this.scrollToElement_c(index)
        },
        // 点击开始移动事件
        onShortcutStart: function(e){
            // 获取到绑定的 index
            let index = e.target.getAttribute('data-index')
            // 使用 better-scroll 的 scrollToElement 方法实现跳转
            // this.scrollToElement(this.$refs.listGroup[index])
            this.scrollToElement(index)
        
            // 记录一下点击时候的 Y坐标 和 index
            let firstTouch = e.touches[0].pageY
            this.touch.y1 = firstTouch
            this.touch.anchorIndex = index
        },
        onShortcutStart_c: function(e){
            // 获取到绑定的 index
            let index = e.target.getAttribute('data-index_c')
            // 使用 better-scroll 的 scrollToElement 方法实现跳转
            // this.scrollToElement(this.$refs.listGroup[index])
            this.scrollToElement_c(index)
        
            // 记录一下点击时候的 Y坐标 和 index
            let firstTouch = e.touches[0].pageY
            this.touch_c.y1 = firstTouch
            this.touch_c.anchorIndex = index
        },
        // 滑动到对应的元素
        scrollToElement (index) {
            // 处理边界情况
            // 因为 index 通过滑动距离计算出来的
            // 所以向上滑超过索引框框的时候就会 < 0，向上就会超过最大值
            if (index < 0) {
                return
            } else if (index > this.listHeight.length - 2) {
                index = this.listHeight.length - 2
            }
            // listHeight 是正的， 所以加个 -
            this.scrollY = -this.listHeight[index]
            this.scroll.scrollToElement(this.$refs.listGroup[index])
        },
        scrollToElement_c (index) {
            // 处理边界情况
            // 因为 index 通过滑动距离计算出来的
            // 所以向上滑超过索引框框的时候就会 < 0，向上就会超过最大值
            if (index < 0) {
                return
            } else if (index > this.listHeight_c.length - 2) {
                index = this.listHeight_c.length - 2
            }
            // listHeight 是正的， 所以加个 -
            this.scrollY_c = -this.listHeight_c[index]
            this.scroll.scrollToElement(this.$refs.listGroup_c[index])
        },
        //完成
        carryout:function(){
            this.$router.push({path:'/userCenter'});
        },
        outlogin:function(){
            localStorage.removeItem('access_token');
            this.$router.push({path:'/'});
        },
        // 切换分类名片
        handClick(flag) {
            this.targetFlag = flag;
            if(flag == 'mycard') {
                this.style_mycard = 'background-color: #ff5158; color: #fff';
                this.style_mycolleague = 'background-color: #fff; color: #9bdf38';
                this.style_mycollection = 'background-color: #fff; color: #dfad35';
            }else if(flag == 'mycolleague'){
                this.style_mycard = 'color: #ff5158; background-color: #fff';
                this.style_mycolleague = 'color: #fff; background-color: #9bdf38';
                this.style_mycollection = 'background-color: #fff; color: #dfad35';
                // 初始化 better-scroll 必须要等 dom 加载完毕
                setTimeout(() => {
                    this._initSrcoll()
                    this._calculateHeight()
                    if (this.$route.query.c_id) {
                        $('select').val(this.$route.query.c_id)
                        this.changeCompany(this.$route.query.c_id)  
                    }
                }, 100)
            }else{
                this.style_mycard = 'color: #ff5158; background-color: #fff';
                this.style_mycolleague = 'background-color: #fff; color: #9bdf38';
                this.style_mycollection = 'color: #fff; background-color: #dfad35';
                // 初始化 better-scroll 必须要等 dom 加载完毕
                setTimeout(() => {
                    this._initSrcoll_c()
                    this._calculateHeight_c()
                }, 100)
            }
        },
        //点击进入企业名片详情
        viewCard(card_id) {
            // const u = navigator.userAgent.toLowerCase();
            // console.log('浏览器',u);
            // if (u.indexOf("like mac os x") < 0 || u.match(/MicroMessenger/i) != 'micromessenger')
            // {
            //     //是mac
                // alert('进来mac了');
            if(this.$system != 'ios'){
                this.$router.push({
                    path: '/userCenter/viewCard',
                    query: {
                        card_id: card_id
                    }
                })
            }else{
                window.location.href = '/userCenter/viewCard?card_id=' + card_id;
            } 
                
            // }else{
            //     alert('普通浏览器');
                // this.$router.push({
                //     path: '/userCenter/viewCard',
                //     query: {
                //         card_id: card_id
                //     }
                // })
            // } 
           
        },
        //点击进入企业名片详情
        viewCollectCard(id, card_id) {
            this.$router.push({
                path: '/viewCollectCard',
                query: {
                    id: id,
                    card_id, card_id
                }
            })
        },
        //二维码显示隐藏
        // erweimaClick(card_id) { 
        //     this.$openLoading();
        //     let timer = null;
        //     timer = setInterval(_ => {
        //         this.path = this.$path + '/UserCard/viewCard?card_id='+ card_id;
        //         this.QRcode = 'https://api.qrserver.com/v1/create-qr-code/?size=150x150&data='+this.path;
        //     }, 1000);
        //     this.$closeLoading();
        //     this.isShow = !this.isShow;
        // },
        //点击隐藏遮罩层
        // intopClick() {
        //     this.isShow = false;
        // },
        // 获取我的名片
        getCardList(){ 
            this.$fetch(this.$path + '/index.php/api/myCardList',this.Card).then((response)=>{
                // if(response.code == 200){
                // 如果删除最后一张之后，没有数据返回，response。code=1，
                this.CardList = response.data;
                // }

            })
          
        },
        // 获取我的同事
        getColleagueCard(){ 
            this.$fetch(this.$path + '/index.php/api/colleagueCardList',this.Card).then((response)=>{
                
                if(response.code == 200){
                    this.ColleagueList = response.data;
                    this.screenColleagueCardList = response.data;
                    // 获取公司列表用于筛选
                    // 数组用于判断预防重复push
                    var cp_id_arr = [];
                    for (let i = 0; i < response.data.length; i++) {
                        for (let j = 0; j < response.data[i].items.length; j++) {
                            if (!cp_id_arr.includes(response.data[i].items[j].c_id)){
                                // 格式 {id: 0, name: '广州卓天'}
                                this.companyArr.push({
                                    id: response.data[i].items[j].c_id,
                                    name: response.data[i].items[j].CardCompany
                                });
                                cp_id_arr.push(response.data[i].items[j].c_id);
                            }
                        }
                    }
                    console.log(this.companyArr)
                }
            })
          
        },
        /**
         * 筛选公司对应的同事名片
         */
        changeCompany: function(e){
            if(e == 0){
                this.screenColleagueCardList = this.ColleagueList
            }else{
                var _screenColleagueCardList = [];
                // 定义一个数组用于存放cp_id，用于判断是否已经push进了数组
                // var cp_id_arr = [];
                // 构建一个适用于的数据对象结构
                // 把骨架搭起来，title怼进去，留个空items
                for(var i=0;i<this.ColleagueList.length;i++){
                    // for (let j = 0; j < this.ColleagueList[i].items.length; j++) {
                        // if(this.ColleagueList[i].items[j].c_id == e && !cp_id_arr.includes(this.ColleagueList[i].title)){
                            _screenColleagueCardList.push({title: this.ColleagueList[i].title, items: []});
                            // _screenColleagueCardList[].items.push(ColleagueList[i].items[j])
                        // }
                    // }
                }
                // 把空的items补充上
                for(var i=0;i<this.ColleagueList.length;i++){
                    for (let j = 0; j < this.ColleagueList[i].items.length; j++) {
                        if(this.ColleagueList[i].items[j].c_id == e){
                            for (let k = 0; k < _screenColleagueCardList.length; k++) {
                                if (this.ColleagueList[i].title == _screenColleagueCardList[k].title) {
                                    _screenColleagueCardList[k].items.push(this.ColleagueList[i].items[j]);
                                }                                
                            }
                        }
                    }
                }
                this.screenColleagueCardList = _screenColleagueCardList;
            }

        },
        // 获取收藏列表
        getCollectionList(){ 
            this.$fetch(this.$path + '/index.php/api/collection/getCollection/' + 3 + '/' + this.Card.user_id).then((response)=>{
                console.log(response)
                if(response.code == 200){
                    // let val = response.data;
                    // func(val);
                    this.CollectionList = response.data;
                    console.log(response.data);
                }

            })
          
        },
        // 点击分享，进入预览名片并出现分享遮罩层
        shareCard: function(card_id){
            // window.location.href = '/userCenter/viewCard?card_id=' + this.cpId + '&' + shareShow + '=' + true;
            this.$router.push({
                path: '/userCenter/viewCard',
                query: {
                    card_id: card_id,
                    shareShow: true
                }
            })
        },
        // 已废弃 当收藏不同步需要用上
        shareCollectCard: function(id, card_id){
            this.$router.push({
                path: '/viewCollectCard',
                query: {
                    id: id,
                    card_id: card_id,
                    shareShow: true
                }
            })
        },
        // 点击进入编辑名片
        editCard: function(card_id){
            if(this.$system != 'ios'){
                this.$router.push({
                    path: '/editCard',
                    query: {
                        card_id: card_id
                    }
                })
            }else{
                window.location.href = '/editCard?card_id=' + card_id;
            }  
            
            // this.$router.push({
            //     path: '/editCard',
            //     query: {
            //         card_id: card_id
            //     }
            // })
        },
        // 点击进入制作名片
        createCard: function(){
            this.$router.push({
                path: '/createCard'
            })
        },
        /**
         * 删除名片
         */
        deleteCard: function(card_id){
            var that = this;
            var that = this;
            MessageBox.confirm('', {
            message: '确定要删除该名片吗',
            title: '提示',
            confirmButtonText: '确定',
            cancelButtonText: '取消'
            }).then(action => {
                if (action == 'confirm') { //确认的回调
                    that.$post(that.$path + '/index.php/api/deleteCard/' + card_id, that.Card).then((response)=>{
                        console.log(response)
                        that.$openTips({
                            text: response.msg,
                            time: 2000
                        })
                        that.getCardList();
                    })
                }
            }).catch(err => {
                if (err == 'cancel') { //取消的回调
                    return false;
                }
            });
        },

        // 点击搜索图标出现搜索框
        // gotobtn() {
        //     this.searchISshow = true;
        // },
        // // 点击取消隐藏搜索框
        // searchCancel() {
        //     this.searchISshow = false;
        //     this.search = '';
        // },
        // 清除内容
        // clearClick() {
        //     this.search = '';
        // }

    }
}

</script>
<style>
@import '../common/css/userCenter';

/* 顶部浮层 */
.main-userCard {
    height: 2.2rem;
    position: absolute;
    width: 100%;
    overflow: hidden;
    z-index: 10;
    top: 0;
}


/* 名片 */
.user_card_box {
    box-shadow: 0 2px 3px -1px #f3ecec;
}
.main_user_card ul {
    display: flex;
    justify-content: space-between;
}
.main_user_card ul>li {
    flex: 1;
    text-align: center;
    width: 2.36rem;
}
.main_user_card ul>li .icon-mingpian {
    width: 0.84rem;
    height: 0.84rem;
    font-size: 0.5rem;
    display: block;
    margin: 0 auto;
    background-color: #FF5158;
    border: 1px solid #FF5158;
    border-radius: 16px;
    color: #fff;
    line-height: 0.84rem;
    text-align: center;
    margin-bottom: 0.2rem;
}
.main_user_card ul>li .icon-tongshiquanzi {
    width: 0.84rem;
    height: 0.84rem;
    font-size: 0.5rem;
    display: block;
    margin: 0 auto;
    background-color: transparent;
    border-radius: 16px;
    color: #9BDF38;
    border: 1px solid #9BDF38;
    line-height: 0.84rem;
    text-align: center;
    margin-bottom: 0.2rem;
}
.main_user_card ul>li .icon-shoucang1 {
    width: 0.84rem;
    height: 0.84rem;
    font-size: 0.5rem;
    display: block;
    margin: 0 auto;
    background-color: transparent;
    border-radius: 16px;
    color: #DFAD35;
    border: 1px solid #DFAD35;
    line-height: 0.84rem;
    text-align: center;
    margin-bottom: 0.2rem;
}
.main_user_card ul>li span {
    font-size: 0.26rem;
    color: #333;
    font-weight: 400;
    display: block;
}

/* 我的名片 */
.mycardlist {
    width: 7.1rem;
    height: auto;
    margin: 0 auto;
    border-radius: 4px;
    box-shadow: 1px 1px 10px 2px #eee;
    background-color: #fff;
}
.mycardlist .mycardlist-top {
    margin: 0.2rem 0.36rem;
}
.mycardlist-top img {
    width: 1.5rem;
    height: 1.5rem;
    float: left;
    margin: 0.2rem 0.4rem 0.2rem 0;
    box-sizing: border-box;
    border-radius: 50%;
}
.mycardlist-top .shareCard {
    font-size: 0.22rem;
    color: #333;
    text-align: right;
    line-height: 0.8rem;
    margin-bottom: -0.3rem;
}
.mycardlist-top .shareCard .icon-fenxiang4,
.mycardlist-top .shareCard .icon-bianji1,
.mycardlist-top .shareCard .icon-baocun {
    font-size: 0.24rem;
    color: #e50838;
    font-weight: bold;
    margin: 0 0.12rem;
}
.mycardlist-top .people-info {
    padding: 0.2rem 0  0.6rem 0;
    box-sizing: border-box;
}
.mycardlist-top .people-info h4 {
    font-size: 0.34rem;
    color: #333;
    text-align: left;
    line-height: 0.5rem;
    margin-bottom: 0.06rem;
    width: 4.37rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
}
.mycardlist-top .people-info span {
    font-size: 0.28rem;
    color: #999;
    display: block;
    text-align: left;
    line-height: 0.4rem;
}
.mycardlist-top .people-info .iphonenum {
    color: #e50838;
}
.mycardlist-top .people-info .icon-dianhua2,
.mycardlist-top .people-info .icon-gongsi,
.mycardlist-top .people-info .icon-dizhi1 {
    font-size: 0.22rem;
    color: #999;
    margin-right: 0.1rem;
}
.mycardlist {
    /* margin: 0.2rem 0.36rem; */
}
.mycardlist .detailed-info {
    /* width: 4.6rem; */
}
.mycardlist .detailed-info p {
    font-size: 0.28rem;
    color: #e50838;
    text-align: left;
    line-height: 0.56rem;
}
.mycardlist .detailed-info p:last-child {
    color: #999;
}
.adress_text {
    display: flex;
    width: 5.2rem;
    line-height: 0.36rem;
}
.detailed-info p .iconfont {
    width: 0.24rem;
    font-size: 0.24rem;
    float: left;
    margin-right: 0.14rem;
    color: #999;
}
.detailed-info p a {
    font-size: 0.28rem;
    color: #e50838;
    text-align: left;
    line-height: 0.56rem;
}
.mycardlist .scan_code {
    margin-top: -.9rem;
    position: relative;
}
.mycardlist .scan_code .icon-erweima {
    width: 0.47rem;
    height: 0.47rem;
    font-size: 0.47rem;
    color: #a7a2a2;
}
.mycardlist .scan_code img {
    position: absolute;
    right: 0;
}

/* 二维码遮罩层 */
.intop {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 31;
}
.intop img {
    width: 30%;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -15%;
    margin-top: -15%;
    z-index: 32;
}
/* 添加名片 */
.mycard_insert {
    height: 1.5rem;
    width: 7rem;
    border: 1px dashed #d8d8d8;
    text-align: center;
    margin: 0.4rem auto;
    font-size: 0.4rem;
    line-height: 1.5rem;
    color: #999;
}
.mycard_insert .icon-icon02 {
    font-size: 0.48rem;
    vertical-align: middle;
    line-height: 1.5rem;
    display: inline-block;
    margin-right: 0.2rem;
}

/* 我的同事检索 */
.mycoll_select {
    width: 7rem;
    height: 0.88rem;
    margin: 0 auto;
    background-color: #fff;
    border: none;
    border-radius: 4px;
    font-family: '\5FAE\8F6F\96C5\9ED1';
    font-weight: 400;
    font-style: normal;
    outline: none;
    font-size: 0.3rem;
    color: #333;
    padding: 0 0.12rem;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    position: absolute;
    z-index: 10;
    left: 50%;
    margin-left: -3.55rem;
    margin-top: -1.08rem;
}
.select_updrow {
    color: #999;
    position: absolute;
    right: 0.4rem;
    height: 0.88rem;
    line-height: 0.88rem;
    display: inline-block;
    margin-top: -1rem;
    z-index: 10;
}
.listView, .listView_c{
    position: relative;
    height: 8.4rem;
    overflow-y: scroll;
}
.list-shortcut, .list-shortcut_c {
    position: fixed;
    z-index: 30;
    right: 0;
    top: 61%;
    transform: translateY(-50%);
    width: 20px;
    padding: 12px 0;
    border-radius: 10px;
    text-align: center;
    /* background: rgba(167, 167, 167, 0.5); */
    font-family:Helvetica;
}
.item, .item_c {
    padding: 3px;
    line-height: 1;
    color: black;
    font-size: 11px;
}
.current, .current_c {
    color: #C20C0C;
}

/* 关键字搜索 */
/* .search_all_intop {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 12;
}
.search_all {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 12;
    background-color: #e50838;
    width: 100%;
    height: 0.88rem;
    line-height: 0.88rem;
}
.search_all .search_span {
    position: relative;
    width: 100%;
    height: 0.88rem;
}
.search_all .search_span .icon-sousuo {
    font-size: 0.3rem !important;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0.16rem 0.2rem 0 -0.6rem;
    box-sizing: border-box;
    height: 0.88rem;
    margin-bottom: -0.3rem;
}
.search_all .search_span input {
    display: inline-block;
    width: 6.5rem;
    margin: 0 auto;
    margin-left: -0.7rem;
    height: 0.54rem;
    line-height: 0.54rem;
    background-color: #fff;
    margin-top: -0.1rem;
    border-radius: 4px;
    padding-left: 0.5rem;
    font-size: 0.28rem;
}
.search_all .search_span .icon-guanbi {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0.14rem 0.12rem 0 0.12rem;
}
.search_all .search_cancel {
    margin-top: -0.65rem;
    margin-right: 0.12rem;
    font-size: 0.28rem;
    color: #fff;
} */


</style>
